<template>
  <div>
    <el-card>
      <el-row class="item">
        <el-col :span="12"><span>版本名称：</span></el-col>
        <el-col :span="12">{{ versionInfo.versionName }}</el-col>
      </el-row>
      <el-row class="item">
        <el-col :span="12"><span>版本号：</span></el-col>
        <el-col :span="12">{{ versionInfo.apkVersion }}</el-col>
      </el-row>
      <el-row class="item">
        <el-col :span="12"><span>版本说明：</span></el-col>
        <el-col :span="12">{{ versionInfo.desc }}</el-col>
      </el-row>
    </el-card>
    <el-card v-for="plate in plates" :key="plate" class="card">
      <template #header>
        <div class="card-header">
          <span>{{ plate.plate }}应用市场发布结果</span>
          <el-tag class="ml-2" type="success" v-if="plate.result == '审核中'">成功</el-tag>
          <el-tag class="ml-2" type="danger" v-if="plate.result == '发布失败'">失败</el-tag>
        </div>
      </template>
      <el-row class="item">
        <el-col :span="12"><span>发布状态：</span></el-col>
        <el-col :span="12">{{ plate.result }}</el-col>
      </el-row>
      <el-row class="item">
        <el-col :span="12"><span>发布信息：</span></el-col>
        <el-col :span="12">{{ plate.msg }}</el-col>
      </el-row>
      <el-row class="item">
        <el-col :span="12"><span>发布时间：</span></el-col>
        <el-col :span="12">{{ plate.publishTime }}</el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, reactive } from 'vue'
import type { VersionInfoResult } from '../api/types'
import { VersionInfoApi } from '../api/'

const props = defineProps({
  // 文件数量
  versionId: {
    type: String,
    required: true
  }
})

const versionInfo = ref<VersionInfoResult>({
  appId: '',
  versionId: '',
  versionName: '',
  status: '',
  apkVersion: '',
  pushTime: '',
  desc: ''
})

interface plateResult {
  plate: string
  result: string
  publishTime: string
  msg: string
}

// 平台数组
const plates = ref<plateResult[]>([])

onBeforeMount(async () => {
  VersionInfoApi(props.versionId)
    .then((res) => {
      versionInfo.value = res.data.data
      plates.value = res.data.data.plates
    })
    .catch((error) => {
      console.log(error)
    })
})
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  margin-bottom: 18px;
}
.card {
  margin-top: 18px;
}
</style>
